<template>
  <div>
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >找回密码</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <van-form style="margin-top: 20px">
          <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
          />
          <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button
                size="small"
                :disabled="valabled"
                @click="sendValcode()"
                type="primary"
                >{{ sendCodeText }}</van-button
              >
            </template>
          </van-field>
          <van-field
            v-model="newPassword"
            type="password"
            name="新密码"
            label="新密码"
            placeholder="新密码"
          />
          <van-field
            v-model="confirmPassword"
            type="password"
            name="确认新密码"
            label="确认新密码"
            placeholder="确认新密码"
          />
        </van-form>
        <van-cell>
          <div>密码必须符合以下格式:</div>
          <div>1:密码必须至少有一个非字母数字字符</div>
          <div>2:密码必须至少有一个数字（'0'-'9'）</div>
          <div>3:密码必须至少有一个大写（'A'-'Z'）</div>
        </van-cell>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24" style="text-align: center"></van-col>
    </van-row>
    <div class="footer">
      <van-button
        style="width: 100px"
        square
        type="primary"
        size="small"
        @click="submit"
        >确认修改</van-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Api, __tenant } from "../../../api/api_config";

export default {
  data() {
    return {
      phone: "",
      newPassword: "",
      confirmPassword: "",
      sms: "",
      valabled: false,
      sendCodeText: "发送验证码",
      sendCodeTimer: {},
      sendCodeCount: 60,
      account: "",
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      //获取近期工作数据
      this.$store.state.tab_show = false;
      this.account = this.$store.state.account;
    },
    back() {
      this.backToLogin();
    },
    submit() {
      if (this.phone === "") {
        Toast("请输入电话号码。");
        return;
      }
      if (this.sms === "") {
        Toast("请输入短信验证码。");
        return;
      }
      if (this.newPassword === "") {
        Toast("请输入新密码。");
        return;
      }
      if (this.confirmPassword === "") {
        Toast("请再次输入新密码。");
        return;
      }
      if (this.newPassword !== this.confirmPassword) {
        Toast("新密码两次输入不一致。");
        this.newPassword = "";
        this.confirmPassword = "";
        return;
      }
      let that = this;
      this.$axios({
        method: Api.Verification.check.method,
        url:
          Api.Verification.check.url +
          "?number=" +
          this.phone +
          "&code=" +
          this.sms,
        data: null,
      })
        .then(function (res) {
          if (res.data.status === 0) {
            Toast.fail("输入的验证码有误");
            return;
          }
          let data = {
            password: that.newPassword,
          };
          that
            .$axios({
              method: Api.User.passwordName.method,
              url: Api.User.passwordName.url + "?name=" + that.account,
              data: data,
              headers: {
                __tenant: __tenant,
              },
            })
            .then(function () {
              const toast = Toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "修改成功，3秒后返回登录页。",
              });

              let second = 3;
              const timer = setInterval(() => {
                second--;
                if (second) {
                  toast.message = ` 修改成功，${second} 秒后返回登录页。`;
                } else {
                  clearInterval(timer);
                  // 手动清除 Toast
                  Toast.clear();
                  that.backToLogin();
                }
              }, 1000);
            })
            .catch(function (e) {
              console.log(e);
            });
        })
        .catch(function (e) {
          console.log(e);
        });
    },
    backToLogin() {
      this.$store.state.token = null;
      this.$router.push("/");
    },
    sendValcode() {
      if (this.phone === "") {
        Toast("请输入电话号码。");
        return;
      }
      this.valabled = true;
      let that = this;
      this.sendCodeTimer = setInterval(() => {
        that.sendCodeCount--;
        if (that.sendCodeCount >= 0) {
          that.sendCodeText = that.sendCodeCount + "秒后可重发";
        } else {
          that.valabled = false;
          that.sendCodeText = "发送验证码";
          clearInterval(that.sendCodeTimer);
        }
      }, 1000);

      this.$axios({
        method: Api.Verification.verification.method,
        url: Api.Verification.verification.url + "?number=" + this.phone,
        data: null,
      })
        .then(function (res) {
          if (res.data.status === 0) {
            Toast.success("信息发送成功");
          } else {
            Toast.fail("信息发送失败");
          }
        })
        .catch(function () {
          Toast.fail("信息发送失败");
        });
    },
  },
};
</script>

<style scoped>
</style>
